import styles from './index.less';
import imgs from '../icon/imgs';
import React from 'react';
import { InputItem } from 'antd-mobile';
import { history } from 'umi';
import { markHeadName } from './utils';

export interface ISecondState {
  pdw: string;
}
export default class Index extends React.Component<ISecondState> {
  constructor(props: any) {
    super(props);
    this.state = {
      pwd: '',
    };
  }

  render() {
    return (
      <div className={styles.t1}>
        <div>一、使用说明</div>
        <div>
          <img src={imgs.example} alt="" />
          <div className={styles.t2}>
            填写完毕后，自动生成图片，手机截图裁剪保存即可!!
          </div>
        </div>

        <div style={{ marginTop: 30 }}>二、登录跳转</div>
        <div className={styles.t4}>
          <InputItem
            onChange={(pwd: string) => {
              this.setState({ pwd });
            }}
            placeholder={'请输入跳转码:123'}
            value={this.state.pwd}
          />
        </div>

        <div
          onClick={() => {
            if (this.state.pwd === '123') {
              history.push({ pathname: '/home' });
            } else {
              alert('请输入正确的跳转码:123');
            }
          }}
          className={styles.t3}
        >
          去生成页
        </div>

        <div style={{ marginTop: 30 }}>二、效果展示</div>

        <div
          onClick={() => {
            history.push({ pathname: '/example' });
          }}
          className={styles.t3}
        >
          去看效果
        </div>
      </div>
    );
  }
}
